<template>
	<view>
		<image src="/static/common/bg1.png" class="pagebg1" mode=""></image>
		<u-navbar :safeAreaInsetTop="true" :autoBack="true" title="注销账号" :bgColor="'rgba(255,255,255,'+opc+')'"
			:placeholder='true'>
		</u-navbar>
		<view class="pagecon">
			<view class="top">
				<image src="/static/set/zxicon.png" class="top__icon" mode=""></image>
				<view class="top__text">
					注销账号将永久失效且不可恢复
				</view>
			</view>
			<view class="box">
				<view class="box__tip">
					*账户注销后，您无法再使用当前账号，请确认账号无任何资产和需要保留的资料.
				</view>
				<view class="box__ti">
					请完成以下验证
				</view>
				<view class="box__t">
					请输入157****3490收到的短信验证码
				</view>
				<view class="box__form">
					<view class="box__label">
						短信验证码
					</view>
					<input type="text" placeholder="请输入6位验证码" class="box__inp" />
					<view class="box__yzbtn" @tap="getCode">
						{{tips}}
					</view>
				</view>
				<u-button text="确认注销" color="#E3432D" customStyle="width:606rpx;height:95rpx;border-radius:20rpx;"></u-button>
			</view>
		</view>
		<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opc: 0,
				tips: '',
				// refCode: null,
				seconds: 60,
			};
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.top {
		padding: 130rpx 0 66rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		&__icon {
			width: 191rpx;
			height: 174rpx;
			margin-bottom: 42rpx;
		}

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #1E1E1E;
			line-height: 30rpx;
		}
	}

	.box {
		width: 610rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0 30rpx;
		padding: 40rpx;

		&__tip {
			padding: 10rpx 24rpx;
			background: #FFF5EB;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #F1910E;
			line-height: 36rpx;
		}

		&__ti {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 35rpx;
			color: #1E1E1E;
			line-height: 35rpx;
			margin: 48rpx 0 21rpx 20rpx;
		}

		&__t {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #919191;
			line-height: 26rpx;
			margin-left: 16rpx;
			margin-bottom: 56rpx;
		}

		&__form {
			padding: 0 4rpx 0 17rpx;
			height: 102rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx #E9EAEC solid;
			margin-bottom: 62rpx;
		}

		&__label {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #2A2A2A;
			line-height: 26rpx;
			margin-right: 34rpx;
		}

		&__inp {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333;
			line-height: 26rpx;
			flex: 1;
		}

		&__yzbtn {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #E3432D;
			line-height: 26rpx;
		}
	}
</style>